<template>
  <section class="v-layout">
    <div
      ref="layout"
      class="layout"
      :class="[
        drag_start_&&'start',
        darg_enter_&&'enter',
        isMoveTop_==='none'&&'none',
        in_&&'in',
        isMoveTop_===false&&'top'
      ]"
      draggable="true"
      @dragstart="dragStart"
      @dragend="dragEnd"
      @drop.stop="drop"
      @dragenter.prevent="dragEnter"
      @dragover.prevent="dragOver"
      @dragleave="dragLave"
      @click="focus()"
    >
      <template v-if="_comps.length == 0">
        <div class="empty">
          <div class="icon">
            <svg-icon icon-class="empty-icon" />
          </div>
        </div>
      </template>
      <template v-else>
        <div class="wappers">
          <div class="mask" />
          <v-wapper v-for="(item, index) in _comps" :id="item.id" ref="wappers" :key="index" :option="item.option" />
        </div>
      </template>
      <div class="remove">
        <div class="button" @click.stop="remove()">
          <el-tooltip effect="dark" content="移除" placement="bottom">
            <div class="icon">
              <svg-icon icon-class="clear-icon" />
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import VWapper from './wapper.vue'
export default {
  name: 'VLayout',
  components: { VWapper },
  inject: ['dragState'],
  props: {
    id: {
      type: [String, Number],
      default: ''
    },
    comps: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      drag_start_: false,
      darg_enter_: false,
      isMoveTop_: false,
      in_: true
    }
  },
  computed: {
    _comps() {
      return this.comps
    },
    _dragState() {
      return this.dragState()
    }
  },
  methods: {

    dragStart(e) {
      const { id } = this
      e.dataTransfer.setData('id', id)
      e.dataTransfer.setData('type', 'layout')
      this.dispatch_event('drag-start', {
        type: 'layout',
        id: id
      })
      this.drag_start_ = true
    },

    dragEnd() {
      this.drag_start_ = false
    },

    drop(e) {
      this.darg_enter_ = false
      const position = this._dragState.moveTop ? 'before' : 'next'
      const { id } = this
      this.dispatch_event('toggle', {
        target: id,
        to: id,
        toType: 'layout',
        from: e.dataTransfer.getData('id'),
        fromType: e.dataTransfer.getData('type'),
        adderName: e.dataTransfer.getData('name'),
        position
      })
    },

    dragEnter() {
      this.darg_enter_ = true
    },

    dragOver(e) {
      this.darg_enter_ = true
      const { type } = this._dragState
      if (type === 'layout') {
        this.$nextTick(() => {
          const { y, height } = this.$refs.layout.getBoundingClientRect()
          const isTop = (e.clientY - y) <= height / 2
          this.dispatch_event('move-vertical', isTop)
          this.isMoveTop_ = isTop
        })
      } else {
        this.isMoveTop_ = 'none'
      }
    },

    dragLave() {
      this.darg_enter_ = false
    },

    remove() {
      const { id } = this
      this.dispatch_event('remove-layout', id)
    },

    focus() {
      const wapper = this.$refs.wappers
      if (wapper && wapper.length > 0) {
        wapper[0].focus()
      }
      this.$parent.focus = false
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/mixin.scss';
@import '@/styles/var.scss';
@import '@/styles/utility/position.scss';
@import '@/styles/utility/shadow.scss';
@import '@/styles/utility/center.scss';
@import '@/styles/utility/iconbtn.scss';
.v-layout {
  .layout {
    width: 100%;
    position: relative;
    transition: all ease-in 0.3s;
    transform: translateY(10px);
    opacity: 0;
    z-index: 10;
    .remove {
      @include absolute(-12px, -12px, none, none);
      display: none;
      cursor: pointer;
      .button {
        border: 1px solid $f6;
        border-radius: 50%;
        background-color: $f6;
        width: 24px;
        height: 24px;
        @include center();
        .icon {
          @include center();
        }
        .svg-icon {
          font-size: 12px;
        }
      }
    }
    .move {
      cursor: move;
      @include absolute(0, none, none, 0);
      line-height: 35px;
      width: 35px;
      text-align: center;
      color: $f4;
      z-index: 7;
      text-align: center;
      font-size: 12px;
      display: none;
    }
    &.enter {
      background: $f6;
      &::before {
        border-bottom: 1px dashed $a1;
        border-top: 1px dashed $a1;
      }
      &::after {
        content: '';
        display: block;
        height: 5px;
        background: $a1;
        z-index: 9;
        @include absolute(none, 0, 100%, 0);
        margin-bottom: -5px;
      }
      &.top {
        &::after {
          @include absolute(100%, 0, none, 0);
          margin-top: -5px;
        }
      }
      &.none {
        &::after {
          display: none;
        }
      }
    }
    &.start {
      visibility: hidden;
    }
    &.in {
      transform: translateY(0);
      opacity: 1;
    }
    &::before {
      content: '';
      display: block;
      border-top: 1px dashed transparent;
      border-bottom: 1px dashed transparent;
      @include absolute(0, 0, 0, 0);
      pointer-events: none;
      z-index: 9;
    }
    .empty {
      line-height: 80px;
      @include center();
      padding: 20px 0 20px 0;
      pointer-events: none;
      color: $f3;
      .icon {
        height: 50px;
        width: 50px;
        font-size: 30px;
        background: $f8;
        border-radius: 50%;
        border: 1px solid $f6;
        @include center();
      }
    }
    .wappers {
      display: flex;
      .mask {
        @include absolute();
        z-index: 9;
      }
      .v-wapper {
        flex: 1;
      }
    }
    &:hover {
      cursor: move;
      &::before {
        border: 1px dashed $f4;
      }
      .remove {
        display: block;
      }
    }
  }
}
</style>
